import React from 'react';
import '@/components/Sider/Sider.scss'
import type { MenuProps } from 'antd';
import { Menu, Layout } from 'antd';
import {
    EnvironmentOutlined, NotificationOutlined,
    PictureOutlined,
} from '@ant-design/icons';
import { useNavigate } from "react-router-dom";
import { useDispatch } from 'react-redux'
import { useState } from 'react';
import { useSelector } from "react-redux";

interface Props {

}

function Sider(props: Props) {
    let navigate = useNavigate()
    let dispatch = useDispatch()


    function getItem(
        label: React.ReactNode,
        key: React.Key,
        icon?: React.ReactNode,
        children?: MenuItem[],
    ): MenuItem {
        return {
            key,
            icon,
            children,
            label,
        } as MenuItem;
    }
    type MenuItem = Required<MenuProps>['items'][number];
    const items: MenuItem[] = [

        getItem('系统首页', 'sub1', <PictureOutlined />,[
            getItem('系统首页', '/index/home',<EnvironmentOutlined />),
        ] ),
        getItem('课程管理', 'sub2', <PictureOutlined />,[
            getItem('直播', '/index/livestreaming',<EnvironmentOutlined />),
            getItem('图文课程', '/index/imagetext',<EnvironmentOutlined />),
            getItem('视频课程', '/index/video',<EnvironmentOutlined />),
            getItem('音频课程', '/index/audio',<EnvironmentOutlined />),
            getItem('专栏课程', '/index/column',<EnvironmentOutlined />),
            getItem('课程分类', '/index/cate',<EnvironmentOutlined />),
            getItem('题库', '/index/questions',<EnvironmentOutlined />),
            getItem('试卷库', '/index/tests',<EnvironmentOutlined />),
        ]),
        
        getItem('数据分析', 'sub2', <PictureOutlined />, [
            getItem('数据概括', '/index/gaikuo', <EnvironmentOutlined />),
            getItem('流量分析', '/index/fenxi', <EnvironmentOutlined />),
            getItem('学习分析', '/index/xuexi', <EnvironmentOutlined />),
            getItem('直播分析', '/index/zhibo', <EnvironmentOutlined />)
        ]),

        getItem('用户管理', 'sub4', <PictureOutlined />,[
            getItem('用户查询', '/index/search',<EnvironmentOutlined />),
            getItem('用户标签', '/index/Label',<EnvironmentOutlined />)
        ] ),
        getItem('营销管理', 'sub8', <NotificationOutlined />, [
            getItem('优惠券', '/index/coupon'),
            getItem('限时折扣', '/index/discount'),
            getItem('满减满折', '/index/decrement'),
            getItem('秒杀', '/index/seckill'),
            getItem('满包邮', '/index/shipping'),
            getItem('满赠', '/index/gift'),
            getItem('拼团', '/index/collage'),
            getItem('套餐', '/index/package'),
            getItem('场景营销', '/index/scenario'),
        ]),
        getItem('设置', 'sub9', <PictureOutlined />,[
            getItem('Banner图管理', '/index/banner',<EnvironmentOutlined />),
            getItem('员工管理', '/index/staff',<EnvironmentOutlined />),
            getItem('角色管理', '/index/role',<EnvironmentOutlined />),
            getItem('操作日志', '/index/logss',<EnvironmentOutlined />),
            getItem('个人信息', '/index/information',<EnvironmentOutlined />),
        ] ),

]
    let handleClick = ({ key, keyPath }: any) => {
        navigate(key)
    }

    return (
        <Layout.Sider className='sider' collapsed={false} >
            <div className='title'>
                <h2>运营后台</h2>
            </div>
            <Menu className='list_item'
                defaultSelectedKeys={['/index/home']}
                mode="inline" items={items}
                onClick={handleClick}
            />
        </Layout.Sider>
    );
}

export default Sider;